<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container >
        <a-form-model ref="form" :model="model"  slot="detail">
          <a-form-model-item label="手环" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deviceId">
            <a-select ref="select" v-model="model.deviceId" allowClear show-search :filter-option="filterOption" placeholder="请选择手环" >
              <a-select-option v-for="item in braceletList" :key="item.id" :value="item.id">{{
                item.deviceName
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </j-form-container>
    </a-spin> 
  </j-modal>
</template>

<script>
  import { getAction } from "@/api/manage.js";
  export default {
    name: 'SkClassModal',
    components: {
    },
    data () {
      return {
        title:'手环绑定',
        width:400,
        visible: false,
        disableSubmit: false,
        confirmLoading: false,
        braceletList:[],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        model:{
          deviceId:undefined
        }
      }
    },
    created () {
    },
    mounted(){
      
    },
    methods: {
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      getBraceletList(record){
        const url = "/management/skDevice/getNoBindSwatch"
        const params = {
          studentId:record.id
        }
        getAction(url,params).then((res)=>{
          if(res.success){
            this.braceletList = res.result;
          } else {
            this.$message.warning(res.message);
          }
        }).catch((error)=>{
          console.error(error);
        })
      },
      edit (record) {
        this.getBraceletList(record);
        this.visible=true
        this.model.studentId = record.id;
        this.model.deviceId = undefined;
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.confirmLoading = true;
        let httpurl = '/management/skStudent/bindSwatch';
        let dataForm = {
          deviceId:this.model.deviceId,
          studentId:this.model.studentId
        }
        getAction(httpurl,dataForm).then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.$emit('ok')
            this.close();
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.confirmLoading = false;
        })
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>